<template>
    <div class="shezhi">
        <div class="title">个人设置</div>
        <ul class="list">
            <li>
                <span>头像</span>
                <div class="right">
                    <img :src="userInfo.avatarUrl" alt="">
                </div>
            </li>
            <li>
                <span>手机号码</span>
                <!-- <div class="right">
                    <span>155****5896</span>
                    <i class="iconfont">&#xe64a;</i>
                </div> -->
                <div class="right right2">
                    <a href="../bindingTel/main">请绑定手机号</a>
                    <i class="iconfont">&#xe64a;</i>
                </div>
            </li>
            <li>
                <span>单位/个人名称</span>
                <div class="right">
                    <span>黄焖鸡米饭</span>
                </div>
            </li>
            <li>
                <span>我的邀请码</span>
                <span>GD5515</span>
            </li>
        </ul>
        <div class="title2">
            <span>收货地址管理</span>
            <a href="../changeaddress/main">更换收货地址</a>
        </div>
        <div class="address">
            <div class="img">
                <img src="/static/images/moren.png" alt="">
            </div>
            <div class="desc">
                <div class="box">
                    <span>收货人：</span>
                    <span>张三  156***9999</span>
                </div>
                <div class="box">
                    <span>收货地址：</span>
                    <span class="addre">山东省济南市济南市槐荫区腊山河西路100号</span>
                </div>
            </div>
            <a href="../editaddress/main" class="icon">
                <span class="iconfont">&#xe64d;</span>
            </a>
        </div>
        <div class="address">
            <div class="desc">
                <div class="box">
                    <span>收货人：</span>
                    <span>张三  156***9999</span>
                </div>
                <div class="box">
                    <span>收货地址：</span>
                    <span class="addre">山东省济南市济南市槐荫区腊山河西路100号</span>
                </div>
            </div>
            <a href="../editaddress/main" class="icon">
                <span class="iconfont">&#xe64d;</span>
            </a>
        </div>
    </div>
</template>
<script>

export default {
  data () {
    return {
      customItem: '',
      region: ['请选择', ''],
      userInfo: {}
    }
  },
  onShow () {
    this.userInfo = wx.getStorageSync('userInfo')
    console.log(this.userInfo, 'this.userInfo用户头像')
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
  },
  methods: {
    bindRegionChange: function (e) {
      console.log(e.mp.detail.value)
      this.region = e.mp.detail.value
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'static/css/base.scss';
.shezhi{
    color: #333;
    font-size: 32rpx;
    .title{
        height: 90rpx;
        line-height: 90rpx;
        padding: 0 30rpx;
    }
    .list{
        background: #fff;
        padding: 0 30rpx;
        li{
            display: flex;
            justify-content: space-between;
            padding: 25rpx 0;
            border-bottom: 1rpx solid #eee;
            span{
                line-height: 90rpx;
            }
            .right{
                display: flex;
                align-items: center;
                img{
                    width: 90rpx;
                    height: 90rpx;
                    border-radius: 50%;
                }
                i{
                    margin-left: 10rpx;
                }
                span{
                    color: #999;
                }
                .picker-wrapper{
                   margin-top: 20rpx;
                   margin-right: 40rpx;
                }
                .detail-addr{
                    margin-top: 20rpx;
                    text-align: right;
                }
               
            }
            .right2{
                a{
                    color: #c74444;
                }
            }
        }
    }
    .title2{
        font-size: 32rpx;
        color: #333;
        display: flex;
        justify-content: space-between;
        padding: 0 30rpx;
        height: 110rpx;
        line-height: 110rpx;
        background: #fff;
        margin-bottom: 4rpx;
        margin-top: 20rpx;
        a{
            color: #22ac38;
            font-size: 28rpx;
        }
    }
    .address{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: 30rpx;
        border-top: 1rpx solid #f4f4f4;
        position: relative;
        .img{
            width: 76rpx;
            height: 76rpx;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .desc{
            font-size: 26rpx;
            color:#666;
            .box{
                display: flex;
                align-items: center;
                span{
                    line-height: 50rpx;
                }
               .addre{
                   display: inline-block;
                   padding: 0;
                   margin: 0;
                   line-height: none;
                   width: 440rpx;
                   @extend %text-limit;
               }
            }
        }
    }
}
</style>
